import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/homePage/index.vue";
import Ecarts01 from "../views/eCharts/echarts01.vue";
import Svg01 from "../views/animation/svg.vue"
import research01 from "../views/html/research.vue"
import bganimation from "../views/animation/bacgroundanimation.vue"
import cssvue from "../views/html/css.vue"
import JSTest from "../views/JS/JSTest.vue"
// import Three01 from  "../views/threejs/ThreejsPracticeOne.vue"
// import Three02 from  "../views/threejs/ThreejsPracticeTwo.vue"
// import Three03 from  "../views/threejs/ThreejsPracticeThree.vue"
import Three from  "../views/threejs/ThreejsPractice.vue"
import Map01 from '../views/gaodeMap/practice01.vue'
import Map02 from '../views/gaodeMap/practice02.vue'
import test01 from '../views/html/test.vue'

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    meta: {
      type:''
    },
    redirect: "/home",
  },
  {
    path: "/home",
    name: "Home",
    meta:{
      title: '项目首页'
    },
    component: Home,
  },
  {
    path: "/echarts01",
    name: "Ecarts01",
    meta:{
      type: 'animation',
      title: 'echarts练习01'
    },
    component: Ecarts01,
  },
  {
    path: "/svg01",
    name: "Svg01",
    meta:{
      type: 'animation',
      title: 'svg动画练习01'
    },
    component: Svg01,
  },
  {
    path: "/bganimation",
    name: "bganimation",
    meta:{
      type: 'animation',
      title: '背景图片动画01'
    },
    component: bganimation,
  },
  {
    path: "/research01",
    name: "research01",
    meta:{
      type: 'researh',
      title: 'html个人练习'
    },
    component: research01,
  },
  {
    path: "/cssvue",
    name: "cssvue",
    meta:{
      type: 'researh',
      title: '一些好用但不好记的css属性'
    },
    component: cssvue,
  },
  {
    path: "/jstest",
    name: "jstest",
    meta:{
      type: 'JSTest',
      title: 'JS测试'
    },
    component: JSTest,
  },
  // {
  //   path: "/three01",
  //   name: "three01",
  //   meta:{
  //     type: 'Threejs',
  //     title: 'ThreeJS练习01'
  //   },
  //   component: Three01,
  // },
  // {
  //   path: "/three02",
  //   name: "three02",
  //   meta:{
  //     type: 'Threejs',
  //     title: 'ThreeJS练习02'
  //   },
  //   component: Three02,
  // },
  // {
  //   path: "/three03",
  //   name: "three03",
  //   meta:{
  //     type: 'Threejs',
  //     title: 'ThreeJS练习03'
  //   },
  //   component: Three03,
  // },
  {
    path: "/three",
    name: "three",
    meta:{
      type: 'Threejs',
      title: 'ThreeJS测学习'
    },
    component: Three,
  },
  {
    path: "/map01",
    name: "map01",
    meta:{
      type: 'Map',
      title: '高德地图练习01'
    },
    component: Map01,
  },
  {
    path: "/map02",
    name: "map02",
    meta:{
      type: 'Map',
      title: '高德地图练习02'
    },
    component: Map02,
  },
  {
    path: "/test01",
    name: "test01",
    meta:{
      type: 'JSTest',
      title: '测试VUE'
    },
    component: test01,
  }
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})

export default router;
